<template>
  <div style="background: #fff">
    <a-tabs @change="selectTabs">
      <a-tab-pane key="defaultConfig" tab="默认配置">
        <div class="account-settings-info-view">
          <a-form ref="defaultConfigInfoFormModel" :rules="defaultConfigRules" :model="vdata.configData" layout="vertical">
            <a-row>
              <a-col :span="6" :offset="2">
                <a-form-item label="默认密码" name="defaultPassword">
                  <a-input v-model:value="vdata.configData.defaultPassword" />
                  <span class="gz-tip-text">置空表示不更改</span>
                </a-form-item>
              </a-col>
            </a-row>
            <a-form-item class="bottom-btn" style="margin-top: 10px">
              <a-button v-if="$access('ENT_SYS_CONFIG_EDIT')" :disabled="!vdata.isEdit" type="primary" :loading="vdata.btnLoading" @click="confirmDefaultConfig"><check-circle-outlined />确认更新</a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-tab-pane>

      <a-tab-pane key="oemConfig" tab="平台配置">
        <div class="account-settings-info-view">
          <a-divider orientation="left">公共参数</a-divider>
          <a-form ref="oemConfigInfoFormModel" :rules="oemConfigRules" :model="vdata.configData" layout="vertical">
            <a-row>
              <a-col :span="6" :offset="2">
                <a-form-item label="系统名称" name="sysName">
                  <a-input v-model:value="vdata.configData.sysName" placeholder="请填写系统名称" />
                </a-form-item>
              </a-col>
              <a-col :span="6" :offset="2">
                <a-form-item label="公司全称" name="companyName">
                  <a-input v-model:value="vdata.configData.companyName" placeholder="请填写公司全称" />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row>
              <a-col :span="6" :offset="2">
                <a-form-item label="公司电话" name="companyTel">
                  <a-input v-model:value="vdata.configData.companyTel" placeholder="请填写公司电话" />
                </a-form-item>
              </a-col>
              <a-col :span="6" :offset="2">
                <a-form-item label="公司客服电话" name="companyServiceTel">
                  <a-input v-model:value="vdata.configData.companyServiceTel" placeholder="请填写公司客服电话" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6" :offset="2">
                <a-form-item label="公司email" name="companyEmail">
                  <a-input v-model:value="vdata.configData.companyEmail" placeholder="请填写公司email" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row style="margin-top: 20px;">
              <a-col :span="6" :offset="2">
                <a-form-item label="系统logo(完整版)" name="sysLogoUrl">
                  <GzUpload v-model:src="vdata.configData.sysLogoUrl" bizType="oem" />
                  <span class="gz-tip-text">建议尺寸：418x64</span>
                </a-form-item>
              </a-col>
              <a-col :span="6" :offset="2">
                <a-form-item label="系统logo(仅图标)" name="sysMinLogoUrl">
                  <GzUpload v-model:src="vdata.configData.sysMinLogoUrl" bizType="oem" />
                  <span class="gz-tip-text">建议尺寸：64x64</span>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row style="margin-top: 20px;">
              <a-col :span="6" :offset="2">
                <a-form-item label="暗色模式系统logo(完整版)" name="darkSysLogoUrl">
                  <GzUpload v-model:src="vdata.configData.darkSysLogoUrl" bizType="oem" />
                  <span class="gz-tip-text">建议尺寸：418x64</span>
                </a-form-item>
              </a-col>
              <a-col :span="6" :offset="2">
                <a-form-item label="暗色模式系统logo(仅图标)" name="darkSysMinLogoUrl">
                  <GzUpload v-model:src="vdata.configData.darkSysMinLogoUrl" bizType="oem" />
                  <span class="gz-tip-text">建议尺寸：64x64</span>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row style="margin-top: 20px;">
              <a-col :span="6" :offset="2">
                <a-form-item label="标签栏图标" name="iconUrl">
                  <GzUpload v-model:src="vdata.configData.iconUrl" bizType="oem" />
                  <span class="gz-tip-text">建议尺寸：32x32</span>
                </a-form-item>
              </a-col>
            </a-row>

            <a-divider orientation="left">运营平台</a-divider>
            <a-row>
              <a-col :span="6" :offset="2">
                <a-form-item label="主题色" name="sysPrimaryColor">
                  <!-- 色卡组件 value 莫名其妙接收不到-->
                  <themeColor ref="themeColorMgr" v-model:value="vdata.oemMgr.sysPrimaryColor" />
                </a-form-item>
              </a-col>
              <a-col :span="6" :offset="2">
                <a-form-item label="登录卡片位置" name="loginPageCardPosition">
                  <a-radio-group v-model:value="vdata.oemMgr.loginPageCardPosition" button-style="solid">
                    <a-radio-button value="left">左</a-radio-button>
                    <a-radio-button value="center">中</a-radio-button>
                    <a-radio-button value="right">右</a-radio-button>
                  </a-radio-group>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row>
              <a-col :span="6" :offset="2">
                <a-form-item label="登录页背景图" name="loginPageBGImgUrl">
                  <GzUpload v-model:src="vdata.oemMgr.loginPageBGImgUrl" bizType="oem" />
                  <span class="gz-tip-text">建议尺寸：1920x1080</span>
                </a-form-item>
              </a-col>
            </a-row>


            <a-row>
              <a-col :span="16" :offset="2">
                <a-collapse>
                  <a-collapse-panel header="系统Logo">
                    <a-row style="margin-top: 20px;">
                      <a-col :span="10" :offset="2">
                        <a-form-item label="系统logo(完整版)" name="sysLogoUrl">
                          <GzUpload v-model:src="vdata.oemMgr.sysLogoUrl" bizType="oem" />
                          <span class="gz-tip-text">建议尺寸：418x64</span>
                        </a-form-item>
                      </a-col>
                      <a-col :span="10" :offset="2">
                        <a-form-item label="系统logo(仅图标)" name="sysMinLogoUrl">
                          <GzUpload v-model:src="vdata.oemMgr.sysMinLogoUrl" bizType="oem" />
                          <span class="gz-tip-text">建议尺寸：64x64</span>
                        </a-form-item>
                      </a-col>
                    </a-row>
                    <a-row style="margin-top: 20px;">
                      <a-col :span="10" :offset="2">
                        <a-form-item label="暗色模式系统logo(完整版)" name="darkSysLogoUrl">
                          <GzUpload v-model:src="vdata.oemMgr.darkSysLogoUrl" bizType="oem" />
                          <span class="gz-tip-text">建议尺寸：418x64</span>
                        </a-form-item>
                      </a-col>
                      <a-col :span="10" :offset="2">
                        <a-form-item label="暗色模式系统logo(仅图标)" name="darkSysMinLogoUrl">
                          <GzUpload v-model:src="vdata.oemMgr.darkSysMinLogoUrl" bizType="oem" />
                          <span class="gz-tip-text">建议尺寸：64x64</span>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-collapse-panel>
                </a-collapse>
              </a-col>
            </a-row>


            <a-divider v-if="vdata.hasAgentEnt" orientation="left">代理商系统</a-divider>
            <a-row v-if="vdata.hasAgentEnt">
              <a-col :span="6" :offset="2">
                <!-- 色卡组件 -->
                <themeColor ref="themeColorAgent" v-model:value="vdata.oemAgent.sysPrimaryColor" />
              </a-col>
              <a-col :span="6" :offset="2">
                <a-form-item label="登录卡片位置" name="loginPageCardPosition">
                  <a-radio-group v-model:value="vdata.oemAgent.loginPageCardPosition" button-style="solid">
                    <a-radio-button value="left">左</a-radio-button>
                    <a-radio-button value="center">中</a-radio-button>
                    <a-radio-button value="right">右</a-radio-button>
                  </a-radio-group>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row v-if="vdata.hasAgentEnt">
              <a-col :span="6" :offset="2">
                <a-form-item label="登录页背景图" name="loginPageBGImgUrl">
                  <GzUpload v-model:src="vdata.oemAgent.loginPageBGImgUrl" bizType="oem" />
                  <span class="gz-tip-text">建议尺寸：1920x1080</span>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row v-if="vdata.hasAgentEnt">
              <a-col :span="16" :offset="2">
                <a-collapse>
                  <a-collapse-panel header="系统Logo">
                    <a-row style="margin-top: 20px;">
                      <a-col :span="10" :offset="2">
                        <a-form-item label="系统logo(完整版)" name="sysLogoUrl">
                          <GzUpload v-model:src="vdata.oemAgent.sysLogoUrl" bizType="oem" />
                          <span class="gz-tip-text">建议尺寸：418x64</span>
                        </a-form-item>
                      </a-col>
                      <a-col :span="10" :offset="2">
                        <a-form-item label="系统logo(仅图标)" name="sysMinLogoUrl">
                          <GzUpload v-model:src="vdata.oemAgent.sysMinLogoUrl" bizType="oem" />
                          <span class="gz-tip-text">建议尺寸：64x64</span>
                        </a-form-item>
                      </a-col>
                    </a-row>
                    <a-row style="margin-top: 20px;">
                      <a-col :span="10" :offset="2">
                        <a-form-item label="暗色模式系统logo(完整版)" name="darkSysLogoUrl">
                          <GzUpload v-model:src="vdata.oemAgent.darkSysLogoUrl" bizType="oem" />
                          <span class="gz-tip-text">建议尺寸：418x64</span>
                        </a-form-item>
                      </a-col>
                      <a-col :span="10" :offset="2">
                        <a-form-item label="暗色模式系统logo(仅图标)" name="darkSysMinLogoUrl">
                          <GzUpload v-model:src="vdata.oemAgent.darkSysMinLogoUrl" bizType="oem" />
                          <span class="gz-tip-text">建议尺寸：64x64</span>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-collapse-panel>
                </a-collapse>
              </a-col>
            </a-row>

            <a-divider orientation="left">机构平台</a-divider>
            <a-row>
              <a-col :span="6" :offset="2">
                <!-- 色卡组件 -->
                <themeColor ref="themeColorMch" v-model:value="vdata.oemMch.sysPrimaryColor" />
              </a-col>
              <a-col :span="6" :offset="2">
                <a-form-item label="登录卡片位置" name="loginPageCardPosition">
                  <a-radio-group v-model:value="vdata.oemMch.loginPageCardPosition" button-style="solid">
                    <a-radio-button value="left">左</a-radio-button>
                    <a-radio-button value="center">中</a-radio-button>
                    <a-radio-button value="right">右</a-radio-button>
                  </a-radio-group>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6" :offset="2">
                <a-form-item label="登录页背景图" name="loginPageBGImgUrl">
                  <GzUpload v-model:src="vdata.oemMch.loginPageBGImgUrl" bizType="oem" />
                  <span class="gz-tip-text">建议尺寸：1920x1080</span>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row>
              <a-col :span="16" :offset="2">
                <a-collapse>
                  <a-collapse-panel header="系统Logo">
                    <a-row style="margin-top: 20px;">
                      <a-col :span="10" :offset="2">
                        <a-form-item label="系统logo(完整版)" name="sysLogoUrl">
                          <GzUpload v-model:src="vdata.oemMch.sysLogoUrl" bizType="oem" />
                          <span class="gz-tip-text">建议尺寸：418x64</span>
                        </a-form-item>
                      </a-col>
                      <a-col :span="10" :offset="2">
                        <a-form-item label="系统logo(仅图标)" name="sysMinLogoUrl">
                          <GzUpload v-model:src="vdata.oemMch.sysMinLogoUrl" bizType="oem" />
                          <span class="gz-tip-text">建议尺寸：64x64</span>
                        </a-form-item>
                      </a-col>
                    </a-row>
                    <a-row style="margin-top: 20px;">
                      <a-col :span="10" :offset="2">
                        <a-form-item label="暗色模式系统logo(完整版)" name="darkSysLogoUrl">
                          <GzUpload v-model:src="vdata.oemMch.darkSysLogoUrl" bizType="oem" />
                          <span class="gz-tip-text">建议尺寸：418x64</span>
                        </a-form-item>
                      </a-col>
                      <a-col :span="10" :offset="2">
                        <a-form-item label="暗色模式系统logo(仅图标)" name="darkSysMinLogoUrl">
                          <GzUpload v-model:src="vdata.oemMch.darkSysMinLogoUrl" bizType="oem" />
                          <span class="gz-tip-text">建议尺寸：64x64</span>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-collapse-panel>
                </a-collapse>
              </a-col>
            </a-row>
            <a-form-item class="bottom-btn" style="margin-top: 20px">
              <a-button v-if="$access('ENT_SYS_CONFIG_EDIT')" :disabled="!vdata.isEdit" type="primary" :loading="vdata.btnLoading" @click="confirmOEMConfig"><check-circle-outlined />确认更新</a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-tab-pane>

      <a-tab-pane key="treatyConfig" tab="文章管理">
        <div class="account-settings-info-view">
          <a-tabs tab-position="left">
            <a-tab-pane key="proxy" tab="营销小程序">
              <div class="account-settings-info-view">
                <a-form layout="vertical">
                  <a-row style="margin-top: 20px;">
                    <a-col :span="18" :offset="2">
                      <div style="font-size: 20px;font-weight:600;text-align:center;padding: 10px 0">隐私政策</div>
                      <div v-if="vdata.proxyDefaultPrivacyHtmlFlag" style="border: 1px solid #ccc">
                        <!-- 工具栏 -->
                        <Toolbar
                          :editorId="proxyEditorId"
                          :defaultConfig="toolbarConfig"
                          style="border-bottom: 1px solid #ccc"
                        />
                        <!-- 编辑器 -->
                        <Editor
                          :defaultHtml="vdata.proxyDefaultPrivacyHtml"
                          :editorId="proxyEditorId"
                          :defaultConfig="editorConfig"
                          style="height: 500px; overflow-y: hidden;"
                        />
                      </div>
                      <div style="font-size: 20px;font-weight:600;text-align:center;padding: 10px 0">用户服务协议</div> 
                      <div v-if="vdata.proxyDefaultAgreementHtmlFlag" style="border: 1px solid #ccc">
                        <!-- 工具栏 -->
                        <Toolbar
                          :editorId="proxyAgreementId"
                          :defaultConfig="toolbarConfig"
                          style="border-bottom: 1px solid #ccc"
                        />
                        <!-- 编辑器 -->
                        <Editor
                          :defaultHtml="vdata.proxyDefaultAgreementHtml"
                          :editorId="proxyAgreementId"
                          :defaultConfig="editorConfig"
                          style="height: 500px; overflow-y: hidden;"
                        />
                      </div>
                    </a-col>
                  </a-row>
                  <a-form-item class="bottom-btn" style="margin-top: 20px">
                    <a-button v-if="$access('ENT_SYS_CONFIG_EDIT')" type="primary" :loading="vdata.btnLoading" @click="confirmTreatyConfig('proxy')"><check-circle-outlined />确认更新</a-button>
                  </a-form-item>
                </a-form>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-tab-pane>

      <a-tab-pane key="smsConfig" tab="高级配置">
        <div class="account-settings-info-view">
          <a-tabs tab-position="left" @change="selectTabs">
            <a-tab-pane key="smsConfig" tab="短信配置">
              <a-form ref="smsInfoFormModel" :rules="smsConfigRules" :model="vdata.configData" layout="vertical">
                <a-divider orientation="left">账号配置</a-divider>
                <a-row>
                  <a-col :span="6" :offset="2">
                    <a-form-item label="accessKeyId" name="accessKeyId">
                      <a-input v-model:value="vdata.configData.accessKeyId" type="text" placeholder="请填写" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6" :offset="2">
                    <a-form-item label="accessKeySecret" name="accessKeySecret">
                      <a-input v-model:value="vdata.configData.accessKeySecret" type="text" :placeholder="vdata.configDataDesen.accessKeySecret || '请填写'" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="6" :offset="2">
                    <a-form-item label="短信签名" name="signName">
                      <a-input v-model:value="vdata.configData.signName" type="text" placeholder="请填写 [短信签名]" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-divider orientation="left">模板ID配置</a-divider>
                <a-row>
                  <a-col :span="6" :offset="2">
                    <a-form-item label="" name="registerMchTemplateId">
                      <div class="flex">
                        <span style="color:red">*</span>  <span>【商户注册】短信模板ID</span>
                        <a-popover title="提示模板">
                          <template #content>
                            <p>*tip： 您在阿里云的短信模板请使用 ${code}作为参数。</p>
                            <p>示例： 您正在进行注册， 验证码为：${code}，该验证码 1 分钟内有效，请勿泄漏于他人。</p>
                          </template>
                          <i class="bi bi-info-circle" />
                        </a-popover>
                      </div>
                      <a-input v-model:value="vdata.configData.registerMchTemplateId" type="text" placeholder="请填写 [商户注册短信模板ID]" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6" :offset="2">
                    <a-form-item label="" name="forgetPwdTemplateId">
                      <div class="flex">
                        <span style="color:red">*</span>   <span>【忘记密码】短信模板ID</span>
                        <a-popover title="提示模板">
                          <template #content>
                            <p>*tip： 您在阿里云的短信模板请使用 ${code}作为参数。</p>
                            <p>示例： 您正在找回密码操作， 验证码为：${code}，该验证码 1 分钟内有效，请勿泄漏于他人。</p>
                          </template>
                          <i class="bi bi-info-circle" />
                        </a-popover>
                      </div>
                      <a-input v-model:value="vdata.configData.forgetPwdTemplateId" type="text" placeholder="请填写 [忘记密码短信模板ID]" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="6" :offset="2">
                    <a-form-item label="" name="loginMchTemplateId">
                      <div class="flex">
                        <span style="color:red">*</span> <span>【短信登录】短信模板ID</span>
                        <a-popover title="提示模板">
                          <template #content>
                            <p>*tip： 您在阿里云的短信模板请使用 ${code}作为参数。</p>
                            <p>示例： 您正在进行登录， 验证码为：${code}，该验证码 1 分钟内有效，请勿泄漏于他人。</p>
                          </template>
                          <i class="bi bi-info-circle" />
                        </a-popover>
                      </div>
                      <a-input v-model:value="vdata.configData.loginMchTemplateId" type="text" placeholder="请填写 [短信登录短信模板ID]" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6" :offset="2">
                    <a-form-item label="" name="accountOpenTemplateId">
                      <div class="flex">
                        <span>【账号开通】短信模板ID</span>
                        <a-popover title="提示模板">
                          <template #content>
                            <p>*tip： 您在阿里云的短信模板请使用 ${loginName} 和 ${loginPwd}作为参数。</p>
                            <p>示例： 账号：${loginName} ，密码：${loginPwd} ，您的账户已开通成功，请勿泄漏于他人。</p>
                          </template>
                          <i class="bi bi-info-circle" />
                        </a-popover>
                      </div>
                      <a-input v-model:value="vdata.configData.accountOpenTemplateId" type="text" placeholder="请填写 [账号开通短信模板ID]" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-form-item class="bottom-btn" style="margin-top: 10px">
                  <a-button v-if="$access('ENT_SYS_CONFIG_EDIT')" :disabled="!vdata.isEdit" type="primary" :loading="vdata.btnLoading" @click="confirmSmsConfig"><check-circle-outlined />确认更新</a-button>
                </a-form-item>
              </a-form>
            </a-tab-pane>

            <a-tab-pane key="ossConfig" tab="文件上传">
              <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }">
                <a-form-item label="选择上传服务">
                  <a-radio-group v-model:value="vdata.configData.ossUseType">
                    <a-radio value="localFile">本地文件上传</a-radio>
                    <a-radio value="aliyunOss">阿里云OSS</a-radio>
                  </a-radio-group>
                </a-form-item>

                <div v-if="vdata.configData.ossUseType == 'aliyunOss'">
                  <a-divider orientation="left">阿里云OSS配置</a-divider>

                  <a-form-item label="endpoint">
                    <a-input v-model:value="vdata.aliyunOssConfig.endpoint" placeholder="例如： oss-cn-beijing.aliyuncs.com" />
                  </a-form-item>
                  <a-form-item label="[公共读]桶名称">
                    <a-input v-model:value="vdata.aliyunOssConfig.publicBucketName" placeholder="请填写[公共读]桶名称" />
                  </a-form-item>
                  <a-form-item label="[私有]桶名称">
                    <a-input v-model:value="vdata.aliyunOssConfig.privateBucketName" placeholder="请填写[私有]桶名称" />
                  </a-form-item>
                  <a-form-item label="AccessKeyId">
                    <a-input v-model:value="vdata.aliyunOssConfig.accessKeyId" placeholder="请填写AccessKeyId" />
                  </a-form-item>
                  <a-form-item label="AccessKeySecret">
                    <a-input v-model:value="vdata.aliyunOssConfig.accessKeySecret" :placeholder="vdata.configDataDesen.accessKeySecret || '请填写accessKeySecret'" />
                  </a-form-item>
                  <a-form-item label="请求过期时间">
                    <a-input-number v-model:value="vdata.aliyunOssConfig.expireTime" style="width: 100%;" placeholder="请填写请求过期时间， 默认30000， 单位： ms" />
                  </a-form-item>
                </div>
           
                <a-form-item class="bottom-btn" style="margin-top: 20px">
                  <a-button v-if="$access('ENT_SYS_CONFIG_EDIT')" :disabled="!vdata.isEdit" type="primary" :loading="vdata.btnLoading" @click="confirmOSSConfig"><check-circle-outlined />确认更新</a-button>
                </a-form-item>
              </a-form>
            </a-tab-pane>

            <a-tab-pane key="apiMapConfig" tab="地图配置">
              <a-form ref="mapConfigFormModel" :rules="defaultConfigRules" :model="vdata.configData" layout="vertical">
                <a-row style="margin-top: 20px;">
                  <a-col :span="6" :offset="2">
                    <a-form-item label="[高德地图商户端web配置] key" name="apiMapWebKey">
                      <a-input v-model:value="vdata.configData.apiMapWebKey" placeholder="请填写" />
                    </a-form-item>
                    <a-form-item label="[高德地图商户端web配置] 秘钥" name="apiMapWebSecret">
                      <a-input v-model:value="vdata.configData.apiMapWebSecret" :placeholder="vdata.configDataDesen.apiMapWebSecret || '请填写'" />
                    </a-form-item>
                    <a-form-item label="[高德地图商户端web服务key] key" name="apiMapWebServiceKey">
                      <a-input v-model:value="vdata.configData.apiMapWebServiceKey" :placeholder="vdata.configDataDesen.apiMapWebServiceKey || '请填写'" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-form-item class="bottom-btn" style="margin-top: 20px">
                  <a-button v-if="$access('ENT_SYS_CONFIG_EDIT')" :disabled="!vdata.isEdit" type="primary" :loading="vdata.btnLoading" @click="cconfirmMapConfigon"><check-circle-outlined />确认更新</a-button>
                </a-form-item>
              </a-form>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-tab-pane>

      <a-tab-pane key="securityConfig" tab="安全配置">
        <div v-if="vdata.groupKey == 'securityConfig'" class="account-settings-info-view">
          <a-form ref="securityConfigFormModel" layout="vertical">
            <a-row>
              <a-col :span="8" :offset="1">
                <a-form-item label="HTTP传输应用层加密开关">
                  <a-radio-group v-model:value="vdata.configData.httpMessageEncryptFlag">
                    <a-radio value="1">开启</a-radio>
                    <a-radio value="0">关闭</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col :span="8" :offset="1">
                <a-form-item label="登录失败次数限制">
                  <a-input-number v-model:value="vdata.loginErrorMaxLimit.limitMinute" :min="1" :precision="0" />
                  分钟最多尝试
                  <a-input-number v-model:value="vdata.loginErrorMaxLimit.errMax" :min="0" :max="10" :precision="0" />
                  次（0次表示不限制）
                </a-form-item>
              </a-col>
              <a-col :span="8" :offset="1">
                <a-form-item label="密码有效期超期是否强制更改">
                  <a-radio-group v-model:value="vdata.configData.passwordExpiredMustModify">
                    <a-radio value="1">是</a-radio>
                    <a-radio value="0">否</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col :span="8" :offset="1">
                <a-form-item label="密码有效期">
                  <a-input-number v-model:value="vdata.configData.passwordExpireDay" :min="1" :precision="0">
                    <template #addonAfter>天</template>
                  </a-input-number>
                </a-form-item>
              </a-col>
              <a-col :span="17" :offset="1">
                <a-form-item label="密码规则">
                  <a-checkbox-group v-model:value="vdata.passwordReg.checkedArr">
                    <a-checkbox value="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])">是否要求大小写和数字</a-checkbox>
                    <a-checkbox value=".{maxLength,}">密码最少<a-input-number v-model:value="vdata.passwordReg.maxLength" :min="0" :max="10" :precision="0" />位</a-checkbox>
                  </a-checkbox-group>
                </a-form-item>
              </a-col>
            </a-row>
            <a-form-item class="bottom-btn">
              <a-button v-if="$access('ENT_SYS_CONFIG_EDIT')" :disabled="!vdata.isEdit" type="primary" :loading="vdata.btnLoading" @click="confirmSecurityConfig">
                <check-circle-outlined />
                确认更新
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup lang="ts">
import {$getConfigs,$updateSysConfigs} from '@/api/sysManage/sysConfig/index'
import { ref, reactive, onMounted, onBeforeUnmount, getCurrentInstance, computed } from 'vue'
import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
import themeColor from './ThemeColor.vue'
import { IToolbarConfig, createToolbar } from '@wangeditor/editor'

const { $infoBox, $access, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties


// 通用处理脱敏数据逻辑
function ruleProcessByDesen(rule, value, callback){
  if (!vdata.configDataDesen[rule.field] && !value) {
    return Promise.reject(new Error(rule.message))
  }
  return Promise.resolve()
}


  const vdata : any = reactive ({
    hasAgentEnt:false,//不显示代理商相关配置
    btnLoading: false,
    configData: {},
    configDataDesen: {} as any, // 脱敏数据
    isvList: [],
    groupKey: 'defaultConfig',
    oemMgr: {},
    oemMch: {},
    oemAgent: {},
    aliyunOssConfig: {}, // 阿里云oss配置信息
    activeKey: '',  // OCR默认展开项
    isEdit:$access('ENT_SYS_CONFIG_EDIT'),

    defaultPrivacyHtmlFlag: false,
    defaultAgreementHtmlFlag: false,
    defaultPrivacyHtml: '',
    defaultAgreementHtml: '',

    agentDefaultPrivacyHtmlFlag: false,
    agentDefaultAgreementHtmlFlag: false,
    agentDefaultPrivacyHtml: '',
    agentDefaultAgreementHtml: '',

    proxyDefaultPrivacyHtmlFlag: false,
    proxyDefaultAgreementHtmlFlag: false,
    proxyDefaultPrivacyHtml: '',
    proxyDefaultAgreementHtml: '',

    storeDefaultPrivacyHtmlFlag: false,
    storeDefaultAgreementHtmlFlag: false,
    storeDefaultPrivacyHtml: '',
    storeDefaultAgreementHtml: '',

    castOutFeeRule: { feeType: 'FIX', fixFee: 0, feeRate: 0, freeLimit: 0, applyLimit: 0 },

    loginErrorMaxLimit: { limitMinute: 15, errMax: 5 }, // 登录失败次数限制对象
    passwordReg: { checkedArr: [], maxLength: 6 }, // 密码规则对象
  })

  onMounted(()=>{
    detail()
  })

  const smsInfoFormModel = ref()
  const defaultConfigInfoFormModel = ref()
  const ocrConfigInfoFormModel = ref()
  const oemConfigInfoFormModel = ref()
  const mapConfigFormModel = ref()

  const smsConfigRules = {
    accessKeyId: [{ required: true, message: '请填写accessKeyId', trigger: 'blur' }],
    accessKeySecret: [{ required: true, message: '请填写accessKeySecret', trigger: 'blur', validator: ruleProcessByDesen }],
    signName: [{ required: true, message: '请填写signName', trigger: 'blur' }],
    forgetPwdTemplateId: [{ required: true, message: '请填写忘记密码短信模板ID', trigger: 'blur' }],
    registerMchTemplateId: [{ required: true, message: '请填写商户注册短信模板ID', trigger: 'blur' }],
    loginMchTemplateId: [{ required: true, message: '请填写短信登录短信模板ID', trigger: 'blur' }],
    accountOpenTemplateId: [{ required: false, message: '请填写短信登录短信模板ID', trigger: 'blur' }]
  }

  const defaultConfigRules = {
          defaultPassword: [{ min:6, message: '请录入至少6位的密码', trigger: 'blur' }],

  }

  const oemConfigRules = {}

  let themeColorMgr = ref() // 两个色卡组件
  let themeColorMch = ref()
  let themeColorAgent = ref()
  function detail () { // 获取基本信息
    $getConfigs(vdata.groupKey).then(res => {


     let tempConfigMap : any =  {} // 临时配置信息
     res.forEach(item => tempConfigMap[item.configKey] = item.configVal )

     let itemMap : any =  {} // 临时配置信息
     res.forEach(item => itemMap[item.configKey] = item )

     // 处理数据脱敏 
     vdata.configDataDesen = { }  // 重置配置信息
     res.forEach(item => vdata.configDataDesen[item.configKey] = item.configValDesen )

     vdata.configData = { }  // 重置配置信息

      vdata.groupKey = res[0].groupKey
      // 参数回显
      if ('smsConfig' === vdata.groupKey) { //短信配置 

        vdata.configData = JSON.parse(res[0].configVal)
        vdata.configDataDesen = JSON.parse(res[0].configValDesen)

      } else if ('defaultConfig' === vdata.groupKey) {

        res.forEach(item => vdata.configData[item.configKey] = item.configVal )

        vdata.configData.defaultPassword = '' // 清空密码， 默认为空，保存生效 。

        // 转换 提现手续费对象
        if(vdata.configData.castOutFeeRule){

            vdata.castOutFeeRule = JSON.parse(vdata.configData.castOutFeeRule)
            if(vdata.castOutFeeRule.fixFee){
              vdata.castOutFeeRule.fixFee = Number.parseFloat((vdata.castOutFeeRule.fixFee / 100).toFixed(2))
            }
            if(vdata.castOutFeeRule.feeRate){
              vdata.castOutFeeRule.feeRate = Number.parseFloat((vdata.castOutFeeRule.feeRate * 100).toFixed(2))
            }
            if(vdata.castOutFeeRule.freeLimit){
              vdata.castOutFeeRule.freeLimit = Number.parseFloat((vdata.castOutFeeRule.freeLimit / 100).toFixed(2))
            }
            if(vdata.castOutFeeRule.applyLimit){
              vdata.castOutFeeRule.applyLimit = Number.parseFloat((vdata.castOutFeeRule.applyLimit / 100).toFixed(2))
            }
        }

      } else if ('ocrConfig' === vdata.groupKey) {

          res.forEach(item => vdata.configData[item.configKey] = item.configVal )
          // OCR默认展开赋值
          vdata.activeKey = vdata.configData.ocrType
      } else if ('ossConfig' === vdata.groupKey) { // oss配置

          res.forEach(item => vdata.configData[item.configKey] = item.configVal )
          vdata.aliyunOssConfig = JSON.parse(itemMap.aliyunOssConfig.configVal || '{}')
          vdata.configDataDesen = JSON.parse(itemMap.aliyunOssConfig.configValDesen || '{}')

      } else if ('oemConfig' === vdata.groupKey) { // oem配置
          vdata.configData = JSON.parse(res[0].configVal || '{}')
          vdata.oemMgr = JSON.parse(res[0].configVal).mgr
          vdata.oemMch = JSON.parse(res[0].configVal).mch
          vdata.oemAgent = JSON.parse(res[0].configVal).agent
          // 为两个色卡组件赋值
          themeColorMgr.value.setColor(vdata.oemMgr.sysPrimaryColor)
          themeColorMch.value.setColor(vdata.oemMch.sysPrimaryColor)
          themeColorAgent.value.setColor(vdata.oemAgent.sysPrimaryColor)
      }  else if ('treatyConfig' === vdata.groupKey) { // 隐私政策与服务协议

          vdata.defaultPrivacyHtml = tempConfigMap.privacyPolicy // html格式
          vdata.defaultPrivacyHtmlFlag = true
          vdata.defaultAgreementHtml = tempConfigMap.serviceAgreement // html格式
          vdata.defaultAgreementHtmlFlag = true

          vdata.agentDefaultPrivacyHtml = tempConfigMap.agentPrivacyPolicy // html格式
          vdata.agentDefaultPrivacyHtmlFlag = true
          vdata.agentDefaultAgreementHtml = tempConfigMap.agentServiceAgreement // html格式
          vdata.agentDefaultAgreementHtmlFlag = true

          
          vdata.proxyDefaultPrivacyHtml = tempConfigMap.proxyPrivacyPolicy // html格式
          vdata.proxyDefaultPrivacyHtmlFlag = true
          vdata.proxyDefaultAgreementHtml = tempConfigMap.proxyServiceAgreement // html格式
          vdata.proxyDefaultAgreementHtmlFlag = true

          vdata.storeDefaultPrivacyHtml = tempConfigMap.storePrivacyPolicy // html格式
          vdata.storeDefaultPrivacyHtmlFlag = true
          vdata.storeDefaultAgreementHtml = tempConfigMap.storeServiceAgreement // html格式
          vdata.storeDefaultAgreementHtmlFlag = true

      } else if ('apiMapConfig' === vdata.groupKey) { // 地图配置
          vdata.configData.apiMapWebKey = res[0].configVal
          vdata.configData.apiMapWebSecret = res[1].configVal
          vdata.configData.apiMapWebServiceKey = res[2].configVal

      } else if ('securityConfig' === vdata.groupKey) { // 安全配置

          res.forEach(item => vdata.configData[item.configKey] = item.configVal )

          if (vdata.configData.loginErrorMaxLimit) {
            vdata.loginErrorMaxLimit = JSON.parse(vdata.configData.loginErrorMaxLimit)
          }

          vdata.passwordReg.checkedArr = []
          if (vdata.configData.passwordRegexp.includes('(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])')) {
            vdata.passwordReg.checkedArr.push('(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])')
          }

          const regex = /.{([0-9]*),}/g
          const matchArr = [...vdata.configData.passwordRegexp.matchAll(regex)]
          if (matchArr.length > 0) {
            vdata.passwordReg.checkedArr.push('.{maxLength,}')

            vdata.passwordReg.maxLength = parseInt(matchArr[0][1])
          }

      } else if('applymentConfig' === vdata.groupKey){
        res.forEach(item => vdata.configData[item.configKey] = item.configVal )
        console.log('applymentConfig',res)
      } else {
        vdata.configData = res
      }
    })
    // 服务商列表
    getIsvList()
  }

  function getIsvList() {
    /* req.list(API_URL_ISV_LIST, { pageSize: -1 }).then(res => {
      vdata.isvList = res.records
    }) */
  }

  function selectTabs (key) { // 清空必填提示
    if (key) {
      vdata.groupKey = key
      detail()
    }
  }

  // 域名管理确认更新
  function confirm (e) {
    $infoBox.confirmPrimary('确认更新域名信息吗？', '', () => {
      vdata.btnLoading = true // 打开按钮上的 loading
      const reqData:any = {}
      for (var i in vdata.configData) {
        reqData[vdata.configData[i].configKey] = vdata.configData[i].configVal
      }
      $updateSysConfigs(vdata.groupKey, reqData).then(res => {
       $infoBox.message.success('修改成功')
        vdata.btnLoading = false
      }).catch(res => {
        vdata.btnLoading = false
      })
    })
  }

  // 短信配置确认更新
  function confirmSmsConfig (e) {
    smsInfoFormModel.value.validate().then(valid => {
      $infoBox.confirmPrimary('确认更新短信配置吗？', '', () => {
        vdata.btnLoading = true // 打开按钮上的 loading
        const reqData:any = {}
        reqData.accessKeyId = vdata.configData.accessKeyId
        if (vdata.configData.accessKeySecret) {
          reqData.accessKeySecret = vdata.configData.accessKeySecret  //有值在set , 否则置空
        }
        reqData.signName = vdata.configData.signName
        reqData.forgetPwdTemplateId = vdata.configData.forgetPwdTemplateId
        reqData.registerMchTemplateId = vdata.configData.registerMchTemplateId
        reqData.loginMchTemplateId = vdata.configData.loginMchTemplateId
        reqData.accountOpenTemplateId = vdata.configData.accountOpenTemplateId
        $updateSysConfigs( vdata.groupKey, reqData)
            .then(res => {
              $infoBox.message.success('修改成功')
              vdata.btnLoading = false
            }).catch(res => {
          vdata.btnLoading = false
        })
      })
    })
  }

  // 默认服务商配置
  function confirmDefaultConfig () {
    defaultConfigInfoFormModel.value.validate().then(valid => {
      $infoBox.confirmPrimary('确认更新默认配置吗？', '', () => {
        vdata.btnLoading = true // 打开按钮上的 loading
        const reqData:any = {}
        reqData.defaultPassword = vdata.configData.defaultPassword ?vdata.configData.defaultPassword : ''
        $updateSysConfigs(vdata.groupKey, reqData)
            .then(res => {
              $infoBox.message.success('修改成功')
              vdata.btnLoading = false
            }).catch(res => {
          vdata.btnLoading = false
        })
      })
    })
  }

  // OEM参数配置
  function confirmOEMConfig() {
    oemConfigInfoFormModel.value.validate().then(valid => {
      $infoBox.confirmPrimary('确认更新平台配置吗？', '', () => {
        vdata.btnLoading = true // 打开按钮上的 loading
        const reqData:any = {}
        reqData.iconUrl = vdata.configData.iconUrl
        reqData.sysLogoUrl = vdata.configData.sysLogoUrl
        reqData.sysMinLogoUrl = vdata.configData.sysMinLogoUrl
        reqData.darkSysLogoUrl = vdata.configData.darkSysLogoUrl
        reqData.darkSysMinLogoUrl = vdata.configData.darkSysMinLogoUrl
        reqData.agentAppTopImgUrl = vdata.configData.agentAppTopImgUrl
        reqData.storeAppTopImgUrl = vdata.configData.storeAppTopImgUrl
        reqData.sysName = vdata.configData.sysName
        reqData.companyName = vdata.configData.companyName
        reqData.companyServiceTel = vdata.configData.companyServiceTel
        reqData.companyTel = vdata.configData.companyTel
        reqData.companyEmail = vdata.configData.companyEmail
        reqData.mgr = JSON.stringify(vdata.oemMgr)
        reqData.mch = JSON.stringify(vdata.oemMch)
        reqData.agent = JSON.stringify(vdata.oemAgent)
        $updateSysConfigs(vdata.groupKey, reqData)
            .then(res => {
              $infoBox.message.success('修改成功')
              vdata.btnLoading = false
            }).catch(res => {
          vdata.btnLoading = false
        })
      })
    })
  }

  // 短信配置确认更新
  function confirmOSSConfig (e) {
      $infoBox.confirmPrimary('确认更新文件上传服务配置吗？', '', () => {
        vdata.btnLoading = true // 打开按钮上的 loading
        const reqData:any = {}

        let reqAliyunObject = Object.assign({}, vdata.aliyunOssConfig)
        if(!reqAliyunObject.accessKeySecret){
          delete reqAliyunObject.accessKeySecret
        }

        reqData.aliyunOssConfig = JSON.stringify(reqAliyunObject)
        reqData.ossUseType = vdata.configData.ossUseType
        $updateSysConfigs(vdata.groupKey, reqData)
            .then(res => {
              $infoBox.message.success('修改成功')
              vdata.btnLoading = false
            }).catch(res => {
          vdata.btnLoading = false
        })
      })
  }

  function checkOcrTYpe(value) {
    vdata.activeKey = value
  }

  // 隐私政策与服务协议确认更新
  function confirmTreatyConfig (saveType) {
    const editor:any = getEditor(editorId) 
    const agreementEditor:any = getEditor(agreementId) 

    const editorByAgent : any = getEditor(agentEditorId) 
    const agreementEditorByAgent : any = getEditor(agentAgreementId) 

    const editorByProxy : any = getEditor(proxyEditorId) 
    const agreementEditorByProxy : any = getEditor(proxyAgreementId) 

    const editorByStore : any = getEditor(storeEditorId) 
    const agreementEditorByStore : any = getEditor(storeAgreementId) 
  

    $infoBox.confirmPrimary('确认更新隐私政策与服务协议吗？', '', () => {
      vdata.btnLoading = true // 打开按钮上的 loading
      const reqData:any = {}

      if(saveType == 'mch') {
        reqData.privacyPolicy = editor.getHtml()
        reqData.serviceAgreement = agreementEditor.getHtml()
      }

      if(saveType == 'agent') {
        reqData.agentPrivacyPolicy = editorByAgent.getHtml()
        reqData.agentServiceAgreement = agreementEditorByAgent.getHtml()
      }

      if(saveType == 'proxy') {
        reqData.proxyPrivacyPolicy = editorByProxy.getHtml()
        reqData.proxyServiceAgreement = agreementEditorByProxy.getHtml()
      }

      if(saveType == 'store') {
        reqData.storePrivacyPolicy = editorByStore.getHtml()
        reqData.storeServiceAgreement = agreementEditorByStore.getHtml()
      }
      $updateSysConfigs(vdata.groupKey, reqData)
          .then(res => {
            $infoBox.message.success('修改成功')
            vdata.btnLoading = false
          }).catch(res => {vdata.btnLoading = false})
    })
  }
  
  // 定义一个编辑器 id ，要求：全局唯一且不变！！！
  const editorId = 'wangeEditor-1' // 隐私政策
  const agreementId = 'wangeEditor-2' // 服务协议

    // 定义一个编辑器 id ，要求：全局唯一且不变！！！
  const agentEditorId = 'agent-wangeEditor-1' // 隐私政策
  const agentAgreementId = 'agent-wangeEditor-2' // 服务协议

   // 定义一个编辑器 id ，要求：全局唯一且不变！！！
  const proxyEditorId = 'proxy-wangeEditor-1' // 隐私政策
  const proxyAgreementId = 'proxy-wangeEditor-2' // 服务协议


    // 定义一个编辑器 id ，要求：全局唯一且不变！！！
  const storeEditorId = 'store-wangeEditor-1' // 隐私政策
  const storeAgreementId = 'store-wangeEditor-2' // 服务协议
  
  // 隐藏编辑器菜单中，一些菜单项
  const toolbarConfig: Partial<IToolbarConfig> = {
    // 隐藏 全屏放大  上传视频  等
    excludeKeys: ['fullScreen', 'uploadVideo', 'insertVideo', 'deleteVideo','uploadImage']
  }

  // 编辑器配置
  const editorConfig = {
      placeholder: '请输入内容...',
      MENU_CONF: { /* 菜单配置，下文解释 */ }
  }

  // 组件销毁时，及时销毁编辑器
  onBeforeUnmount(() => {
      const editor = getEditor(editorId)
      const agreementEditor = getEditor(agreementId)

      const editorByAgent = getEditor(agentEditorId)
      const agreementEditorByAgent = getEditor(agentAgreementId)

      const editorByProxy = getEditor(proxyEditorId)
      const agreementEditorByProxy = getEditor(proxyAgreementId)

      const editorByStore = getEditor(storeEditorId)
      const agreementEditorByStore = getEditor(storeAgreementId)

      if (editor == null || agreementEditor == null || editorByAgent == null 
      || agreementEditorByAgent == null || editorByStore == null || agreementEditorByStore == null || editorByProxy == null || agreementEditorByProxy == null) return

      // 销毁，并移除 editor
      editor.destroy()
      agreementEditor.destroy()
      removeEditor(editorId)
      removeEditor(agreementId)

       // 销毁，并移除 editor
      editorByAgent.destroy()
      agreementEditorByAgent.destroy()
      removeEditor(agentEditorId)
      removeEditor(agentAgreementId)

      // 销毁，并移除 editor
      editorByProxy.destroy()
      agreementEditorByProxy.destroy()
      removeEditor(proxyEditorId)
      removeEditor(proxyAgreementId)

       // 销毁，并移除 editor
      editorByStore.destroy()
      agreementEditorByStore.destroy()
      removeEditor(storeEditorId)
      removeEditor(storeAgreementId)
  })

  function cconfirmMapConfigon () {
    $infoBox.confirmPrimary('确认更新地图配置吗？', '', () => {
        vdata.btnLoading = true // 打开按钮上的 loading

        let reqData:any = {}
        reqData.apiMapWebKey = vdata.configData.apiMapWebKey

        if (vdata.configData.apiMapWebSecret) {
          reqData.apiMapWebSecret = vdata.configData.apiMapWebSecret
        }
        if (vdata.configData.apiMapWebServiceKey) {
          reqData.apiMapWebServiceKey = vdata.configData.apiMapWebServiceKey
        }
        $updateSysConfigs(vdata.groupKey, reqData)
            .then(res => {
              $infoBox.message.success('修改成功')
              vdata.btnLoading = false
            }).catch(res => {
          vdata.btnLoading = false
        })
      })
  }

  // 安全配置保存
  function confirmSecurityConfig () {
    $infoBox.confirmPrimary('确认更新安全配置吗？', '', () => {
      vdata.btnLoading = true // 打开按钮上的 loading

      let reqData:any = {}
      
      reqData.httpMessageEncryptFlag = vdata.configData.httpMessageEncryptFlag
      reqData.passwordExpireDay = vdata.configData.passwordExpireDay + ''
      reqData.passwordExpiredMustModify = vdata.configData.passwordExpiredMustModify

      reqData.loginErrorMaxLimit = JSON.stringify(vdata.loginErrorMaxLimit)

      // 拼接密码规则
      const checkedArr = vdata.passwordReg.checkedArr
      let passwordRegexp = { regexpRules: '', errTips: '' }

      if (checkedArr.includes('(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])')) {
        passwordRegexp.regexpRules += '(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])'
        passwordRegexp.errTips += '必须包含大小写字母和数字，'
      }
      if (checkedArr.includes('.{maxLength,}')) {
        if (vdata.passwordReg.maxLength < 6) {
          return $infoBox.message.success('请填写密码最少位数')
        }
        passwordRegexp.regexpRules += '.{maxLength,}'.replace('maxLength', vdata.passwordReg.maxLength)
        passwordRegexp.errTips += '最少' + vdata.passwordReg.maxLength + '位，'
      }

      if (passwordRegexp.regexpRules) {
        passwordRegexp.regexpRules = '^' + passwordRegexp.regexpRules + '$'
      }
      if (passwordRegexp.errTips) {
        passwordRegexp.errTips = '密码不符合规则，' + passwordRegexp.errTips
        passwordRegexp.errTips = passwordRegexp.errTips.substring(0, passwordRegexp.errTips.length - 1)
      }
      reqData.passwordRegexp = JSON.stringify(passwordRegexp)

      $updateSysConfigs(vdata.groupKey, reqData).then(res => {
        $infoBox.message.success('修改成功')
        vdata.btnLoading = false
      }).catch(res => {
      vdata.btnLoading = false
      })
    })
  }

</script>
<style lang="less" scoped>
.flex {
  display:flex;
  margin-bottom: 8px;
  i {
    margin-left: 5px;
  }
}
  .bottom-btn{
    /deep/ div{
      display: flex;
      justify-content: center;
    }
  }
</style>
<!-- 编辑器样式 -->
<style src="@wangeditor/editor/dist/css/style.css"></style>